<template>
  <div class="el-header-area">
    <div class="el-header-img">
      <img src="../../assets/yiyuanlogo.svg" width="50" height="50" />
    </div>
    <div class="el-header-left">天津人民医院预约平台</div>

    <div class="search-area">
      <input class="search-input" type="text" name="search" placeholder="请输入关键字" />
        <router-link to="guanxinbing"><el-button class="search-button" type="primary" round>
        
                           
                       按医生查找
                        
        </el-button> </router-link>
     <router-link to="fck"> <el-button class="search-button" type="primary" round>
        
               
                    按科室查找
                        
        </el-button> </router-link>
    </div>

    <div class="login-img">
      <img :src="uuhead" width="50" height="50" />
<!-- ************** -->

<!-- ************** -->

    </div>
    <div class="login-area">
      <router-link to="personage" exact>{{user.uname}}</router-link>
    </div>
    <div class="login-shezhi">
      <el-dropdown>
        <!-- <div class="zhezhi-point"> -->
        <span class="el-dropdown-link shezi-ziti">
          设置
          <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
        </span>
        <div class="zhezhi-point">
          <el-dropdown-menu slot="dropdown">
            <div @click="dialogFormVisible = true">
              <el-dropdown-item icon="el-icon-edit">完善个人信息</el-dropdown-item>
            </div>
            <div @click="dialogFormVisible1 =true">   
            <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
          </div>
            <div class="out" @click="loginOut()">
              <el-dropdown-item icon="el-icon-switch-button">
                <router-link to="/login/pswdlogin">退出登录</router-link>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </div>
      </el-dropdown>
      <!-- ************** -->
      <div class="ceshi">
        <el-dialog title="完善信息" :visible.sync="dialogFormVisible">
          <el-form ref="userfrom" :model="userfrom" label-width="80px" style="width:600px">
           
            <el-form-item label="昵称">
              <el-input v-model="userfrom.unicheng"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userfrom.uphonenum"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userfrom.uemail"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userfrom.usex"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userfrom.uage"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userfrom.uaddress"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUser">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- ********************* -->
       <el-dialog title="修改密码" :visible.sync="dialogFormVisible1">
          <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
          <el-form-item label="请输入原密码" prop="upassword">
          <el-input placeholder="请输入原密码" type="password" v-model="ruleForm.upassword" autocomplete="off"></el-input>
        </el-form-item>
           <el-form-item  label="请输入新密码" prop="newupassword">
          <el-input placeholder="请输入新密码" type="password" v-model="ruleForm.newupassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="请确认密码" prop="checkupassword">
          <el-input placeholder="请确认密码" type="password" v-model="ruleForm.checkupassword" autocomplete="off"></el-input>
        </el-form-item>   
              
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button ttype="primary" @click="submitForm('ruleForm')">确 定</el-button>
             
          </el-form>
            </el-dialog>
            
      <!-- ********************* -->
    </div>
    <div class="hlpe-area">帮助中心</div>
  </div>
</template>
<script>
export default {
  data() {
  var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
  var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newupassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };





    // *******************
    return {
      userfrom: {
        uname: "",
        uidcard: "",
        uphonenum: "",
        uage: "",
        usex: "",
        uaddress: "",
        uemail: "",
        unicheng: "",
        uuid:"",
        upassword:"",
        ucreatdate:"",
        ucredit:"",
        uistf:"",
        uhead:"",
        ucode:"",
        ucredit:"",
      },

      dialogFormVisible: false,
       dialogFormVisible1: false,
      user: {
        uname: window.localStorage.getItem("uname"),
        uidcard: window.localStorage.getItem("uidcard")
      },
     
      users: {
      },
      uuhead: "",
        ruleForm: {
        uname: window.localStorage.getItem("uname"),
        uidcard: window.localStorage.getItem("uidcard"),
        upassword:"",
        newupassword: "",
        checkupassword: "",
      },
        rules: {
        upassword:[{ validator: validatePass3, trigger: "blur" }],
        checkupassword: [{ validator: validatePass2, trigger: "blur" }],
        newupassword: [{ validator: validatePass, trigger: "blur" }],
        
        
      }
    };
  },
  mounted: function() {
    this.getUser();
    // this.getImage();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    loginOut() {
      window.localStorage.removeItem("uname");
      window.location.reload;
    },
    // http://localhost:8001/user/getuser
    getUser: function() {
      console.log("测试ggg" + this.user + this.uname);
      this.$http
        .post("http://localhost:8001/user/getuser", this.user)
        .then(function(data) {
          this.users = data.body;
          this.getImage();
        this.userfrom.uuid=data.body.uuid
        this.userfrom.uname=data.body.uname,
        this.userfrom.uidcard=data.body.uidcard,
        this.userfrom.uphonenum=data.body.uphonenum,
        this.userfrom.uage=data.body.uage,
        this.userfrom.usex=data.body.usex,
        this.userfrom.uaddress=data.body.uaddress,
        this.userfrom.uemail=data.body.uemail,
        this.userfrom.unicheng=data.body.unicheng,
        this.userfrom.upassword=data.body.upassword,
        this.userfrom.ucreatdate=data.body.ucreatdate,
        this.userfrom.ucredit=data.body.ucredit,
        this.userfrom.uistf=data.body.uistf,
        this.userfrom.uhead=data.body.uhead,
        this.userfrom.ucode=data.body.ucode,
        this.userfrom.ucredit=data.body.ucredit,

          console.log(data.bodyText);
        });
    },

    getImage: function() {
      this.$http
        .post("http://localhost:8001/getImage", this.user)
        .then(function(data) {
          const abc = +data.body.image;
          this.uuhead = "data:image/jpeg;base64," + data.body.image;
        
        });
    },

   updateUser: function() {
      this.$http
        .post("http://localhost:8001/user/updateusermess", this.userfrom)
        .then(function(data) {
         if(data.bodyText="success"){
          
                this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
           this.dialogFormVisible = false
         }
         else{
            
                 this.$message({
          showClose: true,
          message: '修改失败',
          type: 'error'
        });
         }
        });
    },
     submitForm(formName) {
         this.$http
        .post("http://localhost:8001/user/updatepswd", this.ruleForm)
        .then(function(data) {                 
          console.log(data.bodyText);
          if (data.bodyText == "success") {
         
                        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
           this.dialogFormVisible1 = false
               this.$router.push({path:'/login/pswdlogin'})
          } else {
          
                          this.$message({
          showClose: true,
          message: '修改失败',
          type: 'error'
        });
             
          }
        });
  }
  }
};
</script>

<style scoped>
a{
  text-decoration: none;
  color: #81d4fa;
}
.ceshi {
  position: relative;
}
.login-shezhi {
  position: absolute;
  right: 50px;
  top: -6px;
  font-family: "Microsoft YaHei";
}
.shezi-ziti {
  color: #81d4fa;
  font-size: 18px;
  /* position: absolute; */
}
.zhezhi-point {
  /* position: absolute; */
  margin-top: -25px;
}
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 80px;
  font-family: "STXingkai";
  font-size: 30px;
  position: relative;
  right: 150px;
}

.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left: 170px;
  top: 10px;
}
.search-area {
  width: 580px;
  position: absolute;
  left: 500px;
  font-family: "Microsoft YaHei";
  font-size: 10px;
}

.search-button {
  width: 90px;
  height: 30px;
  font-size: 5px;
}
.search-input {
  /* width: 260px; */
  border: 1px solid #e2e2e2;
  height: 30px;

  background-image: url(../../assets/sousuo.svg);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 5px center;
  padding: 0 0 0 40px;
}

.login-area {
  position: absolute;
  right: 100px;
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #80d8ff;
}
.login-img {
  position: absolute;
  right: 180px;
  top: 10px;
}

.hlpe-area {
  position: absolute;
  right: -50px;
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #80d8ff;
}
</style>

